<template>
  <div class="student">
    <h1 v-text="msg" ref="title"></h1>
    <h1>学校姓名:{{ name }}</h1>
    <h1>学校年龄:{{ myAge }}</h1>
    <h1>学校性别:{{ sex }}</h1>
    <button @click="showVc">按钮</button>
    <button @click="updateAge">按钮</button>
  </div>

  <!-- 
## props配置项

1. 功能：让组件接收外部传过来的数据

2. 传递数据：```<Demo name="xxx"/>```

3. 接收数据：

    1. 第一种方式（只接收）：```props:['name'] ```

    2. 第二种方式（限制类型）：```props:{name:String}```

    3. 第三种方式（限制类型、限制必要性、指定默认值）：

        ```js
        props:{
        	name:{
        	type:String, //类型
        	required:true, //必要性
        	default:'老王' //默认值
        	}
        }
        ```

    > 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。 -->
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: "欢迎学习Vue!",
      myAge: this.age,
    };
  },
  // 简单声明接收
  /*  props: ["name", "sex", "age"],无顺序要求，没有的写上值为undefined,外部传进来的不建议修改，
  若props里的名字与data中重名,props中优先读取，优先级更高 */

  //接收的同时对数据类型进行限制,不会把传过来的数据进行转换
  /* props: {
    name: String,
    age: Number,
    sex: String,
  }, */

  //完整写法
  props: {
    name: {
      type: String,
      required: true, //此参数必须传
    },
    age: {
      type: Number,//多个类型用数组包裹[Number,String,......]
      default: 99, //此参数可传可不传，不传时使用默认值，一般不和required同时出现，如果默认值为对象数据类型: 用函数赋值default:function(){return {}/[]}
    },
    sex: {
      type: String,
      required: true,
    },
  },
  methods: {
    showVc: function () {
      console.log(this);
    },
    updateAge: function () {
      // this.age = 90;这样修改传进来的会有警告
      this.myAge++; //利用myAge进行中转
    },
  },
};
</script>

<style>
</style>